<template>
  <div ref="portaletDivSparticipant">
    <a-card :bordered="false">
      <div ref="commandstats" style="height: 260px;"/>
    </a-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'piechartsparticipant',
  props: {
    participantOption: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      commandstats: null,
      roleCode: ''
    }
  },
  watch: {
    participantOption: {
      handler (value) {
        this.getFirstChart(value)
      },
      deep: true
    }
  },
  filters: {},
  created () {
    this.roleCode = localStorage.getItem('CURRENT_ROLECODE') || ''
  },
  mounted () {
    window.addEventListener('resize', () => {
      this.commandstats && this.commandstats.resize()
    })
    this.$emit('setHeight', this.$refs.portaletDivSparticipant.offsetHeight)
  },
  computed: {},
  methods: {
    getFirstChart (value) {
      // eslint-disable-next-line semi
      !this.commandstats && (this.commandstats = echarts.init(this.$refs.commandstats, 'macarons'));
      this.commandstats.setOption(this.getOptions(value))
    },
    getOptions (seriesData) {
      const sum = seriesData.ptsTotalCount
      const titleText = sum ? '参与者总人数' : ''
      const colors = sum ? ['#0E7EED', '#F3AE59', '#26C4D9', '#F53F3F', '#8991A3'] : ['#DDE2ED']
      const sData = sum ? seriesData.seriesData : [{ value: 0, name: '参与者状态' }]
      const self = this
      return {
        title: {
          text: titleText,
          subtext: sum,
          left: 'center',
          top: 'center',
          textStyle: {
            fontSize: 12,
            color: '#666'
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function (seriesData) {
            const ratio = ((Number(seriesData.data.value) / Number(sum || 1)) * 100).toFixed(0) + '%'
            let html = ` 
                        <div style="color:#1EA5EB;font-size:12px;">${seriesData.name}</div>
                        ${seriesData.marker} &nbsp;${self.$t('all.autotext1630')}
                      `
            html += sum ? `${seriesData.data.value}&${ratio}` : '0'
            return html
          }
        },
        color: colors,
        legend: {
          y: 'top',
          left: 'left',
          icon: 'circle',
          orient: 'vertical',
          fontSize: 10
        },
        series: [{
          name: '现场签署',
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            fontSize: '16',
            position: 'center',
            formatter: ' {c} \r\n \r\n {b} ',
            borderWidth: 4
          },
          itemStyle: {
            borderRadius: 4,
            borderColor: '#fff',
            borderWidth: 4
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '20',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: sData
        }]
      }
    }
  }
}
</script>

<style></style>
